<template>
	<div class="content">
		<Steps :current="0" style="margin-top: 30px;" size="small">
			<Step title="基本信息"></Step>
			<Step title="自助提交"></Step>
			<Step title="视频聊天"></Step>
			<Step title="完成业务"></Step>
		</Steps>

		<div class="line"></div>

		<div class="title">填写基本信息</div>

		<div class="item itemrow">
			<span class="itemtitle">姓名</span>
			<input class="input" v-model="name" />
		</div>

		<div class="item itemrow">
			<span class="itemtitle">身份证号</span>
			<input class="input" v-model="idcard" />
		</div>

		<div class="item itemrow">
			<span class="itemtitle">手机号</span>
			<input class="input" v-model="mobile" />
			<div class="send" @click="sendcode">发送验证码</div>
		</div>

		<div class="item itemrow">
			<span class="itemtitle">产品品类</span>
			<Select v-model="category" class="select">
				<Option v-for="item in categoryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
		</div>

		<Button class="next" type="primary" @click="next">下一步</Button>
	</div>
</template>

<script>
export default {
	name: 'CollectionInfo',
	data() {
		return {
			categoryList: [
				{
					value: '个人贷款',
					label: '个人贷款'
				},
				{
					value: '企业贷款',
					label: '企业贷款'
				},
				{
					value: '小额贷款',
					label: '小额贷款'
				}
			],
			category: null,
			name: null,
			idcard: null,
			mobile: null
		};
	},

	/*订阅方法*/
	sockets: {
		connection(data) {
			console.log('111', data);
		},
		success: function(data) {
			console.log(data);
		},
		connect: function() {
			console.log('connect success');
		},
		//检测socket断开连接
		disconnect: function() {},

		//重新连接socket事件
		reconnect: function() {},
		chat_message: function(data) {
			console.log(data);
		}
	},

	mounted() {
		this.$socket.emit('chat_message', 'hello xx world');
	},

	methods: {
		next() {
			if (this.category == null || this.name == null || this.idcard == null || this.mobile == null) {
				this.$Message.error('请完善信息!!!');
			} else {
				localStorage.setItem('username', this.name);
				localStorage.setItem('idcard', this.idcard);
				localStorage.setItem('mobile', this.mobile);
				localStorage.setItem('category', this.category);
				this.$router.push('/takephoto');
			}
		},
		sendcode() {
			this.$Message.info('验证码已发送');
		}
	}
};
</script>

<style scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
}

.title {
	width: 216px;
	height: 50px;
	font-size: 20px;
	font-family: PingFangSC;
	font-weight: 600;
	color: rgba(51, 51, 51, 1);
	line-height: 50px;
	margin-top: 20px;
}

.line {
	margin-top: 13px;
	width: 100%;
	height: 7px;
	background: rgba(252, 247, 247, 1);
}

.item {
	width: 90%;
	height: 42px;
	margin-top: 20px;
	background: rgba(246, 246, 246, 1);
	border-radius: 2%;
}

.itemrow {
	display: flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
}

.next {
	width: 90%;
	background: rgba(0, 194, 255, 1);
	margin-top: 20px;
	height: 42px;
}

.itemtitle {
	width: 70px;
	height: 40px;
	font-size: 14px;
	margin-left: 19px;
	font-family: PingFangSC;
	font-weight: 600;
	color: rgba(51, 51, 51, 1);
	line-height: 40px;
	text-align: left;
}

.send {
	width: 80px;
	background: rgba(216, 216, 216, 1);
	font-size: 10px;
	font-family: PingFangSC;
	margin-right: 0px;
	color: rgba(135, 135, 135, 1);
	height: 28px;
	line-height: 28px;
	margin-right: 0px;
}

.input {
	/*opacity: 0;*/
	background: rgba(246, 246, 246, 1);
	height: 42px;
	width: 70%;
	border: 0px;
}

.select {
	width: 250px;
	/*margin-right: -70px;*/
	/*background-color: rgba(246,246,246,1);*/
	/*border: 1px solid rgba(246,246,246,1);*/
}

.ivu-select-selection {
	background-color: rgba(246, 246, 246, 1);
	border: 1px solid rgba(246, 246, 246, 1);
}
</style>
